<template>
  <div class="common-layout">
    <el-container>
      <el-header><el-page-header :icon="null" @back="backout">
    <template #content>
      <div class="flex items-center">

        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
          用户管理
        </span>
        <el-tag>admin</el-tag>
      </div>
    </template>
    <template #extra>
      <div class="flex items-center">
        <el-space :size="size" :spacer="spacer">
          <el-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </template>
      <template #default>
        <div
          class="demo-rich-conent"
          style="display: flex; gap: 16px; flex-direction: column"
        >
          <el-avatar
            :size="60"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            style="margin-bottom: 8px"
          />
          <div>
            <p
              class="demo-rich-content__name"
              style="margin: 0; font-weight: 500"
            >
              Admin
            </p>
            <p
              class="demo-rich-content__mention"
              style="margin: 0; font-size: 14px; color: var(--el-color-info)"
            >
              @beathub.com
            </p>
          </div>

          <p class="demo-rich-content__desc" style="margin: 0">
            生产队的驴正在加紧赶工......
          </p>
        </div>
      </template>
    </el-popover>
      </el-space>
        <el-button type="danger" plain class="ml-2" @click="logout">退出</el-button>
      </div>
    </template>
  </el-page-header>
  <el-divider content-position="right">管理员操作</el-divider>
  <div class=box>
    <!--<el-input v-model="input" class="input-width"  placeholder="请输入" />-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="用户名称">
      <el-input v-model="formInline.uname" placeholder="用户模糊查询" clearable />
    </el-form-item>
    <el-form-item>
    <el-button type="danger" @click="btnQuery"><i class="iconfont icon-chaxun"></i></el-button>
    </el-form-item>
   </el-form>
  </div>
 
  </el-header>
  <br>
  <!-- 此为用户信息管理头部 -->
      <el-main style="margin-top: 110px;">
      <!-- 页面主体显示内容 -->
      <el-table :data="tableData" style="width: 100%">
     <el-table-column  prop="uname" label="用户名称" width="250">
      <template #default="scope">
        <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.uname }}</span>
          </div>
      </template>
    </el-table-column>
     <el-table-column prop="usex" label="性别" width="120" >
      <template #default="scope">
        {{ scope.row.usex?"男":"女" }}
      </template>
    </el-table-column>
  
    
    <el-table-column prop="phone" label="联系方式" width="250">
      <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.phone }}</span>
          </div>
        </template>
    </el-table-column>
    <el-table-column prop="udate" label="注册时间" sortable width="250">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.udate }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="操作">
        <template #default="scope">
          <el-button   size="small" @click="detailDialog(scope.row.uid)"
          ><i class="iconfont icon-chakan"></i></el-button
        >
        <el-button type="danger" size="small" @click="updateDialog(scope.row.uid)"><i class="iconfont icon-bianji"></i></el-button>
          <el-popconfirm
        confirm-button-text="是"
        cancel-button-text="否"
        :icon="InfoFilled"
        icon-color="#626AEF"
        title="你确定要删除吗?"
        @confirm="deleteClick(scope.row.uid)"
        >
    <template #reference>
      <el-button type="danger" size="small" @click="deleteClick"><i class="iconfont icon-lajitong"></i></el-button>
      </template>
  </el-popconfirm>
        
        <!-- 修改对话框 -->
<el-dialog v-model="updateDialogVisible" title="修改用户信息">
    <el-form :model="form">
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="form.uname" autocomplete="off" />
      </el-form-item>
 
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.upassword" autocomplete="off" />
      </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio-group v-model="form.usex">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="注册日期" :label-width="formLabelWidth">
        <el-date-picker
          v-model="form.udate"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="兴趣" :label-width="formLabelWidth">
      <el-checkbox-group v-model="form.uinterest">
        <el-checkbox label="吉他" name="type" />
        <el-checkbox label="钢琴" name="type" />
        <el-checkbox label="小提琴" name="type" />
        <el-checkbox label="二胡" name="type" />
        <el-checkbox label="古筝" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="联系方式" :label-width="formLabelWidth">
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateUser">
          修改  
        </el-button>
      </span>
    </template>
  </el-dialog>

        </template>
      </el-table-column>
  </el-table>
    <!-- 分页 -->
    <div class="table-page">
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5,10,20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes,prev, pager, next, jumper"
      :total="pageInfo.total"  
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  <br/>
</div>

<!-- 详情对话框 -->
<el-dialog
    v-model="detailDialogVisible"
    title="查看用户信息"
    width="60%"
  >
  <el-descriptions :column="3" border>
    <el-descriptions-item label="用户名称">{{ userInfo.uname }}</el-descriptions-item>
    <el-descriptions-item label="用户密码">{{ userInfo.upassword }}</el-descriptions-item>
    <el-descriptions-item label="性别">{{ userInfo.usex?"男":"女" }}</el-descriptions-item>
    <el-descriptions-item label="兴趣">{{ userInfo.uinterest }}</el-descriptions-item>
    <el-descriptions-item label="注册日期">{{ userInfo.udate }}</el-descriptions-item>
    <el-descriptions-item label="联系方式">{{userInfo.phone}}</el-descriptions-item>


  </el-descriptions>
   <!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="detailDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="detailDialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template> -->  
      
  </el-dialog>
      </el-main>
    </el-container>
  </div>
 </template>

 <script >
 import { ElMessage } from 'element-plus'
 //import { Timer } from '@element-plus/icons-vue'
 import { ArrowLeft } from '@element-plus/icons-vue'
   //import { de } from 'element-plus/es/locale'
   import { ref } from 'vue'
   import { h } from 'vue'
   import { ElDivider } from 'element-plus'
   const input = ref('')

   export default{

    setup() {
      const size = ref(50)
      const spacer = h(ElDivider, { direction: 'vertical' })

      // 在这里可以进行其他的逻辑设置

      return {
        size,
        spacer,
        // 其他需要暴露给模板的属性
      }
    },
    

    data(){
            return{
              formInline:{
              uname:""
             
            },
            form:{},      //添加对话框
             detailDialogVisible:false, //详情对话框
             updateDialogVisible:false, // 修改对话框
              tableData:[],
              userInfo:{},
              userinfoData:[],
            pageInfo:{},   //分页信息对象
            pageSize:5,    //当前页条数
            currentPage:1,  //当前页号
            }
          },
          mounted(){
            this.LoadData()           //加载表单信息
            this.LocaluserInfoData() //加载用户信息
            this.getPageData(1,5)

            
          },
          methods:{
            center(){
      this.$router.push('admincenter')
    },
    logout() {
      this.$router.push('/');
    },
    backout() {
      this.$router.push('/welcome');
    },

          handleSizeChange(pageSize) {   //选择每一页显示的记录数
            this.pageSize = pageSize
            this.getPageData(this.currentPage, this.pageSize)
            console.log("size:", pageSize);
          },
          handleCurrentChange(pageNum) {  //切换页号时得到当时页号
            this.currentPage = pageNum
            this.getPageData(this.currentPage, this.pageSize)
            console.log("num:", pageNum);

          },
          getPageData(num, size) {   //得到分页数据
            this.$http.get("http://localhost:8080/user/pages", { params: { pageNum: num, pageSize: size } }).then((response) => {
              this.pageInfo = response.data
              this.tableData = this.pageInfo.list
            })
          },

            btnQuery(){
              console.log(this.formInline)
              this.LoadData()
            },
            LocaluserInfoData(){  //加载用户信息数据
        this.$http.get("http://localhost:8080/user/list").then((res)=>{
        this.userInfoData = res.data;
        console.log(res.data);
      }).catch((err)=>{
        console.log(err);
      })
      },
            LoadData(){              //重加载数据
              this.$http.get("http://localhost:8080/user/list?uname="+this.formInline.uname).then((res)=>{
              this.tableData = res.data;
              this.pageInfo.total = res.data.length
              console.log(res.data);
            }).catch((err)=>{
              console.log(err);
            })
          
          },
          updateUser() {   //更新修改操作
            this.form.usex = Number(this.form.usex);  //性别格式转换
            this.form.uinterest = this.form.uinterest.join(',')//修改多选输出格式，数组转字符串
            console.log(this.form);
            this.$http.post("http://localhost:8080/user/update",this.form).then((res)=>{
              console.log(res.data);
              if(res.data==1){
                console.log("修改成功");
                this.form={},    //清空表单
                this.updateDialogVisible=false //关闭
                this.LoadData()   //重新加载
                ElMessage({
                message: '修改成功',
                type: 'success',
                })
              }else{
                console.log("修改失败");
                this.LoadData()
                ElMessage({
                message: '修改失败',
                type: 'warning',
            }).catch((err)=>{
              // console.log(err);
            })
              }
        })
      },
            deleteClick(uid) {    //删除操作
              console.log(uid);
              this.$http.get("http://localhost:8080/user/del/" + uid).then((res) => {
                console.log(res.data);
                if (res.data == 1) {
                  console.log("删除成功");
                  this.LoadData()
                  ElMessage({
                    message: '删除成功',
                    type: 'success',
                  })
                } else {
                  console.log("删除失败");
                  this.LoadData()
                  ElMessage({
                    message: '删除失败',
                    type: 'warning',
                  })
                }
              }).catch((err) => {
                // console.log(err);
              })
            },
            updateDialog(uid) {   //修改操作，数据回显
        console.log(uid);
        this.$http.get("http://localhost:8080/user/get/"+uid).then((res)=>{
            console.log(res.data)
            this.form = res.data
            this.form.usex = this.form.usex?"1":"0"  //性别格式转换
            this.form.uinterest = this.form.uinterest.split(',')//修改多选输出格式，数组转字符串
      }).catch((err)=>{
            console.log(err);
      })
      this.updateDialogVisible = true
  },
            detailDialog(uid) {   //详情操作
        console.log(uid);
        this.$http.get("http://localhost:8080/user/get/"+uid).then((res)=>{
            this.userInfo = res.data
            console.log(res.data);
      }).catch((err)=>{
            console.log(err);
      })
      this.detailDialogVisible = true
  },
      btnAddDialog(){       //添加按钮，跳出添加窗口
          this.dialogFormVisible = true //点击显示弹出框
      }
    }
    
}
   </script>

 <style>
 .input-width {
    width: 40%; /* 设置宽度为100% */
    resize: none; /* 禁止调整大小 */
}
.box{
    position: relative;
    top: 20px;
   }
   .custom-button {
  border: none; /* 去掉边框 */
  padding: 0;   /* 去掉内边距 */
  margin-left:12px; /* 左移10像素，根据需要调整 */
  background-color: transparent; /* 使背景透明，以便不显示默认按钮背景颜色 */
  cursor: pointer; /* 显示指针样式，表明是可点击的 */
}
.table-page{
  float:right;
  margin:12px
}
   </style>
